import React, { Fragment } from 'react';
import MsgItem from './MsgItem';
import MyContext from '../context/MyContext';

const MsgList = (props) => {

  return (
    // 注意，使用的时context.Consumer，不是封装的MyProvider组件
    <MyContext.Consumer>
      {
        ({ list }) => {
          // console.log(list)
          return list.map(el => <MsgItem key={el.id} msg={el} />)
        }
      }
    </MyContext.Consumer>
    // <div>
    //   {/* {list.map(el => <MsgItem key={el.id} msg={el} />)} */}
    // </div>
  );
}

export default MsgList;
